<template>
    <div class="content">
        <!--统计表格 start-->
        <TableLayoutes form-title="" class="table-list tabel-box-no-padding"  >   
            <el-table :data="summarizeList" style="width: 100%" border v-loading="statisticsLoading">
                <el-table-column label="课程总数（节）" prop="courseCount" align="center" >
                    <template scope="scope">
                        <span>{{scope.row.courseCount | isNull}}</span>
                    </template>  
                </el-table-column>
                
                <el-table-column label="课程平均时长（分钟）" prop="timeAvg" align="center" >
                    <template scope="scope">
                        <span>{{scope.row.timeAvg | isNull}}</span>
                    </template>  
                </el-table-column>

                <el-table-column label="使用学校（所）" prop="schoolCount" align="center">
                     <template scope="scope">
                        <span>{{scope.row.schoolCount | isNull}}</span>
                    </template> 
                </el-table-column>
                
                <el-table-column label="购买人数（人）" prop="countBuyer" align="center"  >
                    <template scope="scope">
                        <span>{{scope.row.countBuyer | isNull}}</span>
                    </template> 
                </el-table-column>
                
                <el-table-column label="总收入（元）" prop="sumMoney"  align="center" >
                     <template scope="scope">
                        <span>{{scope.row.sumMoney | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="平台分账收入（元）" prop="sumDivideMoney"  align="center" >
                    <template scope="scope">
                        <span>{{scope.row.sumDivideMoney | isNull}}</span>
                    </template>
                </el-table-column>
            </el-table>  
        </TableLayoutes>
        <!--统计表格 end-->

         <TableLayout form-title="">
            <!-- 查询条件 start-->
            <el-form :model="formInline" class="formInline" label-width="75px"  slot="form"  :label-position="labelPosition" 
            v-collapse="true" :rules="rules">          
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="所属省" >
                            <province v-model="formInline.provinceId"></province>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属市" >
                            <city v-model="formInline.cityId" :province="formInline.provinceId"></city>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属区县">
                            <region v-model="formInline.areaId" :city="formInline.cityId"></region>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="课程标题" prop="lessonName">
                           <el-input v-model="formInline.lessonName" placeholder="请输入课程标题"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="学校名称">
                            <school v-model="formInline.schoolName" :provinceId="formInline.provinceId" :cityId="formInline.cityId" :areaId="formInline.areaId" style="width:100%" @change="schoolChange"></school>
                        </el-form-item>
                    </el-col> 
                    
                    <el-col :span="8">
                          <el-form-item label="状态">
                                <el-select v-model="formInline.state" placeholder="请选择状态" style="width:100%">
                                    <el-option
                                        v-for="item in options"
                                        :key="item.id"
                                        :label="item.label"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                          </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="开课时间">
                            <el-row>
                                <el-col :span="11">
                                    <el-date-picker :editable="false" v-model="formInline.startDate" type="date" format="yyyy-MM-dd" placeholder="选择开始日期" :picker-options="formInline.pickerOptions1" @change="dateChange1" style="width:100%">
                                    </el-date-picker>
                                </el-col>
                                <el-col :span="2" align="center"> 至 </el-col>
                                <el-col :span="11">
                                    <el-date-picker :editable="false" v-model="formInline.endDate" type="date" format="yyyy-MM-dd" placeholder="选择结束日期" :picker-options="formInline.pickerOptions2" @change="dateChange2" style="width:100%">
                                    </el-date-picker>
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="top-line">
                    <el-button type="primary" @click="onSubmit()">查询</el-button>
                </div>
            </el-form>
            <!-- 查询条件 end-->
            <div class="table-title" slot="table-title">
            </div>
            <!-- 表格 start -->
            <el-table :data="lessonList" border style="width: 100%"  v-loading="loading">
                <el-table-column label="课程标题" align="center" min-width="170">
                    <template scope="scope">
                        <router-link :to="{name:'课程详情',params:{'lId':scope.row.id}}">{{scope.row.title}}</router-link>
                    </template>
                </el-table-column>
                
                <el-table-column label="学校" prop="schoolName" align="center" min-width="170"></el-table-column>

                <el-table-column label="地区" prop="schoolArea" align="center" min-width="140"></el-table-column>
                
                <el-table-column label="报名人数" prop="peopleCount" align="center"></el-table-column>
                
                <el-table-column label="观看次数" prop="watchTimes"  align="center"></el-table-column>
                
                <el-table-column label="状态" align="center" width="90">
                    <template scope="scope">
                        <!-- <el-tooltip :content="'结束原因：'+scope.row.reason" placement="top" v-if="scope.row.status == '2'">
                            <span>{{scope.row.status | setLessonStatus}}</span>
                        </el-tooltip> -->
                        <span>{{scope.row.status | setLessonStatus}}</span>
                    </template>                 
                </el-table-column>
                
                <el-table-column label="开课时间" prop="startTime" align="center" min-width="140" ></el-table-column>

                <el-table-column label="预计结束时间" prop="expectEndtime" align="center" min-width="140"></el-table-column>

                <el-table-column label="结束时间" align="center" min-width="140">
                    <template scope="scope">
                        <span>{{scope.row.endTime | isNull}}</span>
                    </template>  
                </el-table-column>

                <el-table-column label="评论数量" prop="commentCount" align="center" ></el-table-column>

                <el-table-column label="操作"  width="170">
                    <template scope="scope">               
                        <el-button type="text" class="btn-success" v-if="scope.row.status !== '2' " @click="cancelLesson(scope.row.id)">结束课程</el-button>
                        <el-button type="text" class="btn-success" @click="checkCommentDetail(scope.row.id)" v-if="scope.row.status !== '0'">查看评价</el-button>
                        <el-button type="text" class="btn-success" @click="showStopLessonReason(scope.row.reason)" v-if="scope.row.status == '2'">结束原因</el-button>
                    </template>
                </el-table-column>           
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
            <!-- 表格 end -->
        </TableLayout>

        <!--结束课程 start-->
        <cancel-lesson-dialog :dialogVisible="showDialog" :lesson-id="lessonId" @update-list="searchFetchData"></cancel-lesson-dialog>
        <!--结束课程 end-->
        
    </div> 
</template>

<script>
import moment from 'moment';
import { getStatisticalData, getLessonListByParams } from 'api/onlineLesson';
import TableLayout from 'components/TableLayout';
import TableLayoutes from 'components/TableLayoutes';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import region from 'components/CascadeRegion/region';
import cancelLessonDialog from './cancelLessonDialog';
import { mapState, mapActions, mapGetters } from 'vuex';
import school from 'components/SchoolClasss/school';
export default {
    name: 'lessonManageList',
    components: {TableLayout, TableLayoutes, cancelLessonDialog, province, city, region, school},
    data() {
        return {
            labelPosition: 'right',
            showDialog: {
                isShow: false
            }, // 显示结束课程对话框
            formInline: {
                province: [],
                findCity: [],
                findArea: [],
                provinceId: '', // 省
                cityId: '', // 市
                areaId: '', // 区
                lessonName: '', // 课程标题
                schoolName: '', // 学校   
                schoolId: '',            
                state: '',
                startDate: '',
                endDate: '',
                pickerOptions1: {},
                pickerOptions2: {},
                schoolNameList: [],
                lessonList: []
            },
            summarizeList: [],
            lessonList: [], // 课程列表       
            options: [
                {
                    id: '',
                    label: '请选择'
                },
                {
                    id: 0,
                    label: '报名中'
                },
                {
                    id: 1,
                    label: '直播中'
                },
                {
                    id: 2,
                    label: '已结束'
                }

            ],
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            rules: {
                // lessonName: [
                //      { pattern: /[^<>]+/, message: '请输入正确的标题', trigger: 'blur' }
                // ]

            },
            lessonId: '', // 删除的课程ID
            statisticsLoading: false, // 统计表格的IDg
            loading: false, // 课程列表的加载
            schoolLoading: false
        }
    },
    created() {
        // 获取统计数据
        this.getSummarizeList();

        // 获取所有课程列表
        this.searchFetchData();


    },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters([
            'uid'
        ])
    },
    methods: {
         // 全局获取行数
        ...mapActions(['ChangePageSize']),

        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        
         // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.loading = true;
            this.ChangePageSize(val);
            this.searchFetchData();
        },

        handleCurrentChange(val) {
            this.loading = true;
            this.listQuery.page = val;
            this.searchFetchData();
        },

        // 功能：开始日期选择
        dateChange1(date) {
            this.formInline.pickerOptions2 = {
                disabledDate(time) {
                    return time.getTime() < new Date(date).getTime() - 8.64e7 ;
                }
            };
        },

    // 功能：结束日期选择
        dateChange2(date) {
            this.formInline.pickerOptions1 = {
                disabledDate(time) {
                    return time.getTime() > new Date(date).getTime();
                }
            };
        },
        // 获取学校id
        schoolChange(val) {
            this.formInline.schoolId = val
        },

        // 查询
        onSubmit() {
            this.listQuery.page = 1;
            this.loading = true;
            this.searchFetchData();
        },

        // 获取统计数据
        getSummarizeList() {
            this.statisticsLoading = true;
            getStatisticalData().then(res => {
                // console.log(res);
                this.summarizeList.push(res.data.content);
                this.statisticsLoading = false;
            })
        },

        // 查询数据
        searchFetchData() {
            console.log(2222);
            this.loading = true;
            let startTemp = this.formInline.startDate == ''?'' :moment(this.formInline.startDate).format('YYYY-MM-DD');
            let endTemp = this.formInline.endDate == ''?' ' :moment(this.formInline.endDate).format('YYYY-MM-DD');
            getLessonListByParams(
                this.listQuery.page,
                this.config.pageSize,
                this.formInline.schoolId,
                this.formInline.provinceId,
                this.formInline.cityId,
                this.formInline.areaId,
                this.formInline.lessonName,
                this.formInline.state,
                startTemp,
                endTemp).then(res => {
                    this.lessonList = res.data.content.list;
                    this.listQuery.total = res.data.content.pagination.total;
                    this.loading = false;        
                })
        },


        // 查看评论
        checkCommentDetail(lessonId) {
            this.$router.push({path: `commentDetail/${lessonId}`});
        },

        // 查看课程详情
        checkLessonDetail(lessonId) {
            this.$router.push({path: `lessonDetail/${lessonId}`});
        },
        // 结束课程
        cancelLesson(lessonId) {
            this.showDialog.isShow = true;
            this.lessonId = lessonId;
        },

        // 显示结束原因
        showStopLessonReason(reason) {
            if (reason === null) reason = '暂无结束原因';
            this.$alert(reason, '结束原因', {
                confirmButtonText: '确定'
            });
        }

    },
    filters: {
        // 判断课程的状态
        setLessonStatus(index) {
            return ['报名中', '直播中', '已结束'][index]
        }
    }
  
}
</script>

<style lang="scss" scoped>
@import '../../../../styles/elMessageBox';
.content {
  position: relative;
  padding: 0px;
  $bgcolor: #fff;

   .table-list {
       margin-bottom:20px;
        .table-box {
            padding-bottom: 0px ;
        }
    } 
    a{
    color:#37a1fb;

        &:hover{
            text-decoration:underline;
        }
    }
    
  .formInline {
    .formBtn {
      width: 100%;
      height: 70px;
      border-top: 1px solid #dddddd;
      position: relative;
      .btnPosition {
        position: absolute;
        right: 0px;
        top: 18px;
      }
    }

    .table-title {
      .btnPosition {
        position: absolute;
        left: 0px;
        top: 18px;
      }
    }
  }

}
</style>

